<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    用户名：<input type="text" id="inp">
    <p></p>

    <script src="../js/jquery.3.5.1.js"></script>
    <script>
        // 声明handle函数
        function handle(data) {
            $("p:eq(0)").css("border", "solid 1px #f00");
            // 修改p标签的提示文本
            $("p:eq(0)").html(data.msg)
        }

        $("#inp").blur(function () {
            var username = $("#inp").val()
            // 想服务端发送请求  检测用户名是否存在
            // 1.创建script标签
            const script = document.createElement("script");
            script.src = "http://127.0.0.1:8088/jsonp";
            document.body.appendChild(script);
        })
    </script>

    <style>
        #result {
            width: 300px;
            height: 200px;
            border: solid 1px rgb(161, 161, 161);
            margin: 5px 0;
        }
    </style>
    <button id="btn1">点击发送GET请求</button>
    <div id="result"></div>

    <script>
        $("#btn1").click(function () {
            $.get("http://127.0.0.1:8088/jsonp2?callback=?", function (data) {
                console.log(data)
                // $("#result").html(data.msg + "~~" + data.exist)
            }, "json")
        })
    </script>




    <style>
        #result2 {
            width: 300px;
            height: 200px;
            border: solid 1px rgb(161, 161, 161);
            margin: 5px 0;
        }
    </style>
    <button id="btn2">点击发送GET请求2</button>
    <div id="result2"></div>

    <script>
        $("#btn2").click(function () {
            const x = new XMLHttpRequest();
            x.open("GET", "http://127.0.0.1:8088/cors1")
            x.send();
            x.onreadystatechange = function () {
                if (x.readyState === 4) {
                    if (x.status >= 200 && x.status <= 300) {
                        console.log(x.response)
                        console.log(x.responseText)
                    }
                }
            }
        })
    </script>



</body>

</html>